<template>
    <div class="News">
        <!-- 导航区 -->
        <ul>
            <li v-for="news in newsList">
                <RouterLink 
                    :to="{
                        name:'xiang',  // 只能用name，不能用path
                        params:{
                            id:news.id,
                            title:news.title,
                            content:news.content
                        }
                    }"
                >
                {{ news.title }}
                </RouterLink>
            </li>
        </ul>
    </div>
    <!-- 展示区 -->
    <div>
        <RouterView></RouterView>
    </div>
</template>


<script lang="ts" setup name="News">
   import {reactive} from "vue";
   import {RouterView,RouterLink} from "vue-router";
   //数据
   const newsList = reactive([
    {id:"laiufad01",title:'标题1',content:"内容1"},
    {id:"laiufad02",title:'标题2',content:"内容2"},
    {id:"laiufad03",title:'标题3',content:"内容3"}
   ])
</script>

<style scoped>

</style>